<template>
  <div class="detail-list">
    <ul class="detail-list-content">
      <li class="detail-list-item" v-for="item in list" :key="item.title">
        {{ item.title }}
      </li>
    </ul>
  </div>
</template>
<script setup>
defineOptions({
  name: 'DetailList',
})
defineProps({
  list: {
    type: Array,
    default: () => []
  }
})
</script>
<style lang="scss" scoped>
.detail-list {
  box-sizing: border-box;
  width: 100%;
  background-color: #eee;
  .detail-list-content {
  padding: .1rem;
    .detail-list-item {
      border-bottom: 1px solid #ccc;
      padding: .1rem 0;
      &::before {
        display: inline-block;
        content: "";
      }
    }
  }
}
</style>
